<template>
  <el-table
    :data="resources"
    class="custom-table thead-bg-color"
    v-loading="loading"
  >
    <el-table-column label="回答内容">
      <div slot-scope="{ row }" class="flex flex-wrap">
        <router-link
          :to="`/spaces/${row.space_id}/issues/${row.issue_id}?
          page=${parseInt(row.floor / 10, 10) + 1}&comment_id=${row.id}`"
          :content="row.content"
          class="block link line1 m-r-10"
          v-text="delHtml(row)"
        />
      </div>
    </el-table-column>
    <el-table-column label="回答者" width="160">
      <router-link
        slot-scope="{ row }"
        :to="`/users/${row.author.id}`"
        class="line1 link">
        <i class="el-icon-user"></i>
        {{ row.author.nickname }}
      </router-link>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'comments-list',
  props: {
    resources: {
      type: Array,
      required: true,
    },
    loading: Boolean,
  },
  methods: {
    delHtml(row) {
      const newRow = row.content.replace(/<[^>]+>/g, '');
      if (newRow.length > 60) {
        return `${newRow.slice(0, 60)}...`;
      }
      return newRow;
    },
  },
};
</script>

<style></style>
